<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="css/style.css">
  <style>
    #instance .demo {
      width: 200px;
      height: 167px;
    }

    #instance2 .demo {
      width: 492px;
      height: 480px;
    }

    #instance3 .demo {
      width: 243px;
      height: 106px;
    }

    #instance4 .demo {
      width: 300px;
      height: 300px;
      padding: 50px;
    }
  </style>
</head>
<body>
<div id="instance">
  <div class="demo"></div>
  <div class="btn-box">
    <button class="btn btn-primary" type="button" data-open>
      done
    </button>
  </div>
</div>

<div id="instance2">
  <div class="demo"></div>
  <div class="btn-box">
    <button class="btn btn-primary" type="button" data-open>
      done
    </button>
  </div>
</div>

<div id="instance3">
  <div class="demo"></div>
  <div class="btn-box">
    <button class="btn btn-primary" type="button" data-open>
      done
    </button>
  </div>
</div>

<div id="instance4">
  <div class="demo"></div>
  <div class="btn-box">
    <button class="btn btn-primary" type="button" data-open>
      done
    </button>
  </div>
</div>

<script src="js/event.js"></script>
<script>
  const githubLogoBase64 = ''
</script>

<script>
  (function() {
    const instance = document.querySelector('#instance')
    const demo = instance.querySelector('.demo')
    const btn = instance.querySelector('.btn')
    const loading = new JParticles.WaveLoading(demo, {
      font: 'normal 900 18px Arial',
      textFormatter: '%d%',
      textColor: '#fff',
      speed: 0.13,
      crestHeight: 10,
      duration: 8000,
      resize: false,
      borderRadius: '',
      mask: '/img/merry_christmas.jpg',
    })

    loading
      .onProgress(function(progress) {
        if (progress >= 30 && progress <= 70) {
          loading.setOptions({
            mask: 'http://upload.wikimedia.org/wikipedia/commons/e/ef/Octicons-logo-github.svg'
          })
        } else if (progress > 70) {
          loading.setOptions({
            mask: 'https://github.githubassets.com/images/modules/logos_page/Octocat.png'
          })
        }
      })

    btn.onclick = function() {
      loading.done()
    }
  })()

  ;(function() {
    const effect = new JParticles.WaveLoading('#instance2 .demo', {
      font: 'normal 900 18px Arial',
      textFormatter: '%d%',
      speed: 0.2,
      crestCount: 1,
      crestHeight: 10,
      duration: 8000,
      resize: false,
      borderRadius: '',
      mask: githubLogoBase64,
      maskMode: 'ghost'
    })
  })()

  ;(function() {
    const effect = new JParticles.WaveLoading('#instance3 .demo', {
      font: 'normal 900 18px Arial',
      textFormatter: '',
      speed: 0.2,
      crestCount: 1,
      crestHeight: 10,
      duration: 8000,
      resize: false,
      borderRadius: '',
      mask: '//img30.360buyimg.com/ling/jfs/t1/92499/15/4615/9505/5de86318E776b30d4/dd02ceff50fcbe7f.png',
      maskMode: 'ghost'
    })

    setInterval(() => {
      effect.setOptions({
        maskMode: Math.random() > 0.5 ? 'ghost' : 'normal'
      })
    }, 1000)
  })()

  loadImage({
    src: 'https://raw.githubusercontent.com/Barrior/assets/main/chrome-logo.svg',
    width: 1000,
    height: 1000,
  }, (image) => {
    console.log('loadImage: ', image)
    console.log('loadImage naturalWidth: ', image.naturalWidth)
    console.log('loadImage width: ', image.width)
    console.log('loadImage naturalHeight: ', image.naturalHeight)
    console.log('loadImage height: ', image.height)
    setTimeout(() => {
      new JParticles.WaveLoading('#instance4 .demo', {
        num: 2,
        fillColor: 'rgba(0, 0, 0, 0.15)',
        textColor: 'white',
        offsetLeft: [0, 1.5],
        crestHeight: 5,
        crestCount: 2,
        speed: 0.25,
        duration: 10000,
        mask: image,
        maskMode: 'ghost',
      })
    }, 1000)
  })
</script>
</body>
</html>
